---
title: Ikony
image: /images/user-guide/objects/objects.png
---

<Frame>
  <img src="/images/user-guide/objects/objects.png" alt="Header" />
</Frame>

Seznam ikon používaných po celé naší aplikaci.

## Tabler Icons

V celé aplikaci používáme ikony Tabler pro React.

<Tabs>

<Tab title="Installation"><br/>

```
yarn add @tabler/icons-react
```

</Tab>

<Tab title="Props">

Každou ikonu můžete importovat jako komponentu. Here's an example: <br />

```jsx
import { IconArrowLeft } from "@tabler/icons-react";

export const MyComponent = () => {
  return <IconArrowLeft color="red" size={48} />;
};
```

</Tab>

<Tab title="Props">

| Vlastnosti | Typ             | Popis                          | Výchozí       |
| ---------- | --------------- | ------------------------------ | ------------- |
| velikost   | číslo           | Výška a šířka ikony v pixelech | 24            |
| barva      | textový řetězec | Barva ikon                     | současnáBarva |
| stroke     | číslo           | Šířka tahu ikony v pixelech    | 2             |

</Tab>

</Tabs>

## Custom Icons

Kromě ikon Tabler aplikace používá také některé vlastní ikony.

### Icon Address Book

Zobrazí ikonu adresáře.

<Tabs>

<Tab title="Usage">

```jsx
import { IconAddressBook } from 'twenty-ui/display';

export const MyComponent = () => {
  return <IconAddressBook size={24} stroke={2} />;
};
```

</Tab>

<Tab title="Props">

| Vlastnosti | Typ   | Popis                          | Výchozí |
| ---------- | ----- | ------------------------------ | ------- |
| velikost   | číslo | Výška a šířka ikony v pixelech | 24      |
| stroke     | číslo | Šířka tahu ikony v pixelech    | 2       |

</Tab>

</Tabs>
